<template>
	<Container>
		<view class="header">
			<view class="header-content" :style="{ background: 'url(' + assignment.backgroundUrl + ') 0 0 /100% 100%' }"><Article :articles="assignment.articles" /></view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="questionWord" />
		<view class="selectedBox" v-if="storyEnd">
			<view
				class="selected"
				@tap="tap(item, index)"
				:class="{ success: chooses[index]==='success', error: chooses[index]==='error' }"
				hover-class="touch"
				hover-stay-time="100"
				v-for="(item, index) in assignment.optionArticles"
				:key="index"
			>
				<image class="image" :src="item.imageUrl" mode="aspectFit"></image>
				<text>{{ item.name }}</text>
				<SuccessIcon v-if="chooses[index] === 'success'" />
			</view>
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import { story } from '../../../common/mixins/assignmentStory.js'
import Article from '../article.vue'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	mixins: [mixins, story],
	components: { Article,AudioIcon, Question, Container,SuccessIcon },
	methods: {
		tap: function(item, index) {
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transform translate3d(0, 0, 0)
	position relative
	margin 5vh 0
	.header-content
		position absolute
		height 100%
		width 1080rpx
		left 50%
		top 50%
		transform translate3d(-50%, -50%, 0)
		z-index 98
.selectedBox
	margin-top 5vh
	animation outIn 0.5s
	display flex
	flex-direction column
	align-items center
	justify-content center
	.selected
		width 480rpx
		height 120rpx
		border 8rpx solid #FFCD86
		border-radius 60rpx
		box-sizing border-box
		margin 2vh 0
		display flex
		align-items center
		justify-content center
		position relative
		transition all 0.3s
		.image
			width 45%
			height 100%
		text
			width 50%
			font-size 50rpx
			letter-spacing 10rpx
</style>
